<template>
    <div v-if="cinema" class="subpage">
        <my-head :title='cinema.name'></my-head>
        <div>
            <p>
                {{cinema.address}}
            </p>
        </div>
        <div class="banner">
            <div class="swipe" v-if="films[current]">
                <img :src="films[current].poster" class="xuimg" alt="">
                <my-swiper id="onebanner" class="onebanner" :options="options">
                    <my-swiper-item v-for="(l,i) in films" :key='i'>
                        <img :src="l.poster" alt="" class="himg">
                    </my-swiper-item>
                </my-swiper>
            </div>
        </div>
        <div class="film-info" v-if="films[current]" @click="gotoWhere({name:'film',query:{name:films[current].name},params:{filmId:films[current].filmId}})">
            <h2 class="name"> {{films[current].name}}</h2>
            <h2 class="name"> {{films[current].category}}</h2>
            <h2 class="name"> {{films[current].runtime}}分钟</h2>
            <h2 class="name"> 
                <span v-for="(l,i) in films[current].actors" :key='i'>
                    {{l.name}}
                </span>
            </h2>
        </div>
    </div>
</template>



<script>
export default {
    data(){
        var that = this; // 保留 this 指向
        return {
            current:0,
            cinema:null,
            films:[] ,  // 当前电影院播放的电影列表
            schedules:[] ,  // 当前电影院对某部电影的某一天排片情况
            options:{
                observer:true,
                slideToClickedSlide:true,
                effect : 'coverflow',
                slidesPerView: 2.8,
                centeredSlides: true,
                spaceBetween : 40,
                coverflowEffect: {
                    rotate: 5,
                    stretch: 10,
                    depth: 340,
                    modifier: 2,
                    slideShadows : false
                },
                on:{
                    slideChange: function(){
                        console.log('改变了，activeIndex为'+this.activeIndex);
                        that.current = this.activeIndex;
                    },
                }
            }
        }
    },
    watch:{
        current(v){
            console.log(v)
            this.getschedules(this.films[v].filmId , this.$route.params.date)
        }
    },
    methods:{
        async getCinemaData(){
            let res = await this.$ajax.getMZdata({
                cinemaId:this.$route.params.cinemaId,
            },{
                'X-Host': 'mall.film-ticket.cinema.info'
            })
            this.cinema = res.data.cinema 
        },
        async getFilms(){
            let res = await this.$ajax.getMZdata({
                cinemaId:this.$route.params.cinemaId,
            },{
                'X-Host': 'mall.film-ticket.film.cinema-show-film'
            }) 
            this.films = res.data.films
        },
        async getschedules(filmId,date){
            let res = await this.$ajax.getMZdata({
                cinemaId:this.$route.params.cinemaId,
                filmId,
                date
            },{
                'X-Host': 'mall.film-ticket.schedule.list'
            }) 
            this.schedules = res.data.schedules 
        }
    },
    mounted(){
        this.getCinemaData()
        this.getFilms()
        if(this.$route.params.filmId && this.$route.params.date){
            this.getschedules(this.$route.params.filmId , this.$route.params.date)
        }
    }
}
</script>

<style lang="scss" scoped>
.banner{
    .swipe{
        width:100%;
        height:160px;
        padding:15px 0 ;  
        position: relative;
        .xuimg{
            width:100%;
            height:160px;
            overflow: hidden;
            -webkit-filter: blur(14px);   // 背景虚化 
            filter: blur(14px);
        }
        .onebanner{
            width:100%;
            height:100%;
            padding:20px 0;
            top:0;
            left:0;
            position: absolute;
            .himg{
                width:90px;
                height:130px;
            }
        }
    }
}

.film-info{
    padding:30px;
}
</style>